<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >{{ $t('common.add') }}</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
        :columns="columns"
      ></right-toolbar>
    </el-row>
    <WmsTable v-loading="loading" :data="wmStockAgeList">
      <el-table-column
        :label="$t('fiance.feeName')"
        align="center"
        prop="feeName"
        v-if="columns[0].visible"
      />
      <el-table-column
        :label="$t('fiance.feeType')"
        align="center"
        prop="feeType"
        v-if="columns[1].visible"
      />
      <el-table-column
        :label="$t('fiance.billingMethod')"
        align="center"
        prop="billingMethod"
        v-if="columns[2].visible"
      />
      <el-table-column
        :label="$t('fiance.pieceUnit')"
        align="center"
        prop="pieceUnit"
        v-if="columns[3].visible"
      />
      <el-table-column
        :label="$t('fiance.taxRate')"
        align="center"
        prop="taxRate"
        v-if="columns[4].visible"
      />
      <el-table-column
        :label="$t('fiance.currency')"
        align="center"
        prop="currency"
        v-if="columns[5].visible"
      />
      <el-table-column
        :label="$t('common.enableStatus')"
        width="140"
        align="center"
        v-if="columns[6].visible"
      >
        <template slot-scope="scope">
          <el-switch
            @change="handleStatusChange(scope.$index, scope.row)"
            :active-value="'1'"
            :inactive-value="'0'"
            v-model="scope.row.enableStatus"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('common.remark')"
        align="center"
        prop="remark"
        v-if="columns[7].visible"
      />
      <el-table-column
        :label="$t('common.operation')"
        align="center"
        prop="price"
        v-if="columns[8].visible"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="handlEdit(scope.row)">{{ $t('common.edit') }}</el-button>
        </template>
      </el-table-column>
    </WmsTable>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      class="el-dialog-normal"
    >
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="110px"
        label-position="left"
        label-suffix=":"
        style="margin-bottom: 50px"
      >
        <el-row :gutter="20">
          <el-col
            v-for="(item, index) in addOrEditColumn"
            :key="index"
            :xs="24"
            :sm="item.col"
            :md="item.col"
            :lg="item.col"
            :xl="item.col"
          >
            <FormComponents
              :item-obj="item"
              :form="ruleForm"
              :isedit="item.edit"
            />
          </el-col>
        </el-row>
      </el-form>
      <div class="foot-fixed-total">
        <el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
        <el-button type="primary" @click="submit('ruleForm')">{{ $t('common.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  bmsBaseFeeItemList,
  addBmsBaseFeeItem,
  updateBmsBaseFeeItem,
  delBmsBaseFeeItem,
  exportBmsBaseFeeItem,
} from "@/api/money";
import {
  CustomerAccountsReceivable,
  BillingMethod,
  DefaultGenerationMethod,
  TaxRate,
  WorkingObjects,
  CurrencyList,
  EnableStatus,
  BaseFeeServiceTypeList,
  feeTypeList
} from "@/views/financial/const/index.js";
import FormComponents from "@/components/FormComponents/index.vue";
const ruleForm = {
  billingMethod: "",
  currency: "",
  feeName: "",
  feeType: "",
  generationMethod: "",
  pieceUnit: "",
  taxRate: "",
  workingObjects: "",
  enableStatus: "1",
  remark: "",
  // serviceType: ''
};
export default {
  name: "WmsReceiptOrderDetail",
  components: { FormComponents },
  data() {
    // match(/^[A-Z]+$/)
    var validateCode = (rule, value, callback) => {
      if (!value.match(/^[A-Z_]+$/)) {
        callback(new Error(this.$t('common.Please enter capital letters')));
      } else {
        callback();
      }
    };
    return {
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        customerId: null,
        receiptOrderNo: null,
        warehousingTime: null,
        areaId: null,
        receiptOrderStatus: null,
      },
      activeName: "",
      tabs: [{ name: this.$t('fiance.charges'), value: "" }],
      dialogVisible: false,
      ruleForm: Object.assign({}, ruleForm),
      loading: false,
      CustomerAccountsReceivable,
      feeTypeList,
      BillingMethod,
      DefaultGenerationMethod,
      TaxRate,
      WorkingObjects,
      CurrencyList,
      BaseFeeServiceTypeList,
      EnableStatus,
      rules: {
        feeName: [{ required: true, message: this.$t('common.pleaseInput') }],
        feeType: [{ required: true, message: this.$t('common.placeholderSelect') }],
        feeCode: [
          { required: true, message: this.$t('common.pleaseInput') },
          { validator: validateCode },
        ],
      },
      columns: [
        { key: 1, label: this.$t('fiance.feeName'), visible: true },
        { key: 2, label: this.$t('fiance.feeType'), visible: true },
        { key: 3, label: this.$t('fiance.billingMethod'), visible: true },
        { key: 4, label: this.$t('fiance.pieceUnit'), visible: true },
        { key: 5, label: this.$t('fiance.taxRate'), visible: true },
        { key: 6, label: this.$t('fiance.currency'), visible: true },
        { key: 7, label: this.$t('common.enableStatus'), visible: true },
        { key: 8, label: this.$t('common.remark'), visible: true },
        { key: 9, label: this.$t('common.operation'), visible: true },
      ],
      dialogTitle: this.$t('common.newadd'),
      //   数据数组
      wmStockAgeList: [],
      returnData(data) {
        return data.list.map((r) => {
          r.feeType = (
            CustomerAccountsReceivable.find((f) => f.value === r.feeType) || {}
          ).label;
          r.billingMethod = (
            BillingMethod.find((f) => f.value === r.billingMethod) || {}
          ).label;
          r.taxRate = (TaxRate.find((f) => f.value === r.taxRate) || {}).label;
          r.workingObjects = (
            WorkingObjects.find((f) => f.value === r.workingObjects) || {}
          ).label;
          return r;
        });
      },
    };
  },
  created() {
    this.getList();
  },
  computed: {
    columnsAry() {
      return [
        { prop: "feeName", label: this.$t('fiance.feeName') },
        {
          prop: "feeType",
          label: this.$t('fiance.feeType'),
          format: (x) => {
            return (
              (this.CustomerAccountsReceivable.find((y) => y.value === x) || {})
                .label || x
            );
          },
        },
        { prop: "billingMethod", label: this.$t('fiance.billingMethod') },
        { prop: "pieceUnit", label: this.$t('fiance.pieceUnit') },
        { prop: "taxRate", label: this.$t('fiance.taxRate') },
        { prop: "currency", label: this.$t('fiance.currency') },
        { prop: "enableStatus", slot: "enableStatus", label: this.$t('common.enableStatus') },
        { prop: "remark", label: this.$t('common.remark') },
        { slot: "operation", label: this.$t('common.operation') },
      ];
    },
    addOrEditColumn() {
      return [
        { prop: "feeName", label: this.$t('fiance.feeName'), type: "input", col: 12 },
        {
          prop: "feeType",
          label: this.$t('fiance.feeType'),
          type: "select",
          col: 12,
          selectOptions: this.feeTypeList,
        },
        { prop: "feeCode", label: this.$t('fiance.feeCode'), type: "input", col: 12 },
        {
          prop: "billingMethod",
          label: this.$t('fiance.billingMethod'),
          type: "select",
          col: 12,
          selectOptions: this.BillingMethod,
        },
        {
          prop: "currency",
          label: this.$t('fiance.currency'),
          type: "select",
          col: 12,
          selectOptions: this.CurrencyList,
        },
        {
          prop: "generationMethod",
          label: this.$t('common.generationMethod'),
          type: "select",
          col: 12,
          selectOptions: this.DefaultGenerationMethod,
        },
        {
          prop: "pieceUnit",
          label: this.$t('fiance.pieceUnit'),
          type: "select",
          col: 12,
          selectOptions: this.CurrencyList,
        },
        {
          prop: "taxRate",
          label: this.$t('fiance.taxRate'),
          type: "select",
          col: 12,
          selectOptions: this.TaxRate,
        },
        {
          prop: "enableStatus",
          label: this.$t('common.enableStatus'),
          type: "radio",
          col: 12,
          selectOptions: this.EnableStatus,
        },
        {
          prop: "remark",
          label: this.$t('common.remark'),
          type: "input",
          inputType: "textarea",
          col: 24,
        },
      ];
    },
  },
  methods: {
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let api =
            this.dialogTitle === this.$t('common.newadd')
              ? addBmsBaseFeeItem
              : updateBmsBaseFeeItem;
          const fieldsToDelete = [
            "createTime",
            "updateTime",
            "updateBy",
            "createBy",
            "createName",
            "updateName",
            "traceId",
          ];
          for (const field of fieldsToDelete) {
            delete this.ruleForm[field];
          }
          api({ ...this.ruleForm })
            .then((r) => {
              this.$message.success(this.$t('common.succcessInfo'));
              this.dialogVisible = false;
              this.getList();
            })
            .catch((e) => {});
        } else {
          return false;
        }
      });
    },
    getList() {
      this.loading = true;
      const { pageNum, pageSize } = this.queryParams;
      const query = {
        ...this.queryParams,
        pageNum: undefined,
        pageSize: undefined,
      };
      const pageReq = { page: pageNum - 1, size: pageSize };
      bmsBaseFeeItemList(query, pageReq).then((response) => {
        const { content, totalElements } = response;
        this.wmStockAgeList = content;
        this.total = totalElements;
        this.loading = false;
      });
    },
    jumpClick(row) {},
    handleClick(v) {
      this.activeName = v;
      this.getList();
    },
    handleSeacrh(v) {
      this.filterParams = {
        ...v.filterForm,
        ...v.filterParam,
        polNameCn: v.fuzzySearch,
        logisticsFlag: this.activeName,
      };
      this.$refs.tableRef.handleSearchParams(this.filterParams);
    },
    handlEdit(row) {
      this.dialogVisible = true;
      this.ruleForm = row;
      this.dialogTitle = this.$t('common.edit');
    },
    handleAdd() {
      this.dialogVisible = true;
      this.dialogTitle = this.$t('common.newadd');
      this.ruleForm = Object.assign({}, ruleForm);
    },
    handleStatusChange(index, row) {
      this.$confirm(this.$t('common.confirmMsg') + '?', this.$t('common.reminder'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: "warning",
      })
        .then(() => {
          const params = {
            id: row.id,
            enableStatus: row.enableStatus,
          };
          updateBmsBaseFeeItem({ ...params }).then((res) => {
            this.$message.success(this.$t('common.succcessInfo'));
            this.getList();
          });
        })
        .catch(() => {
          this.getList();
        });
    },
  },
};
</script>
